<template>
  <div class="container">
    <div class="ss">
      <cebianlan></cebianlan>
      <div>
        <div class="tou1">
            <img class="tou" src="../../assets/images/tou.jpg" alt="">
            demo6666
            <ul class="right">
                <li class="right-icon"><img class="hui" src="../../assets/images/icon/huiyuan.png" alt="">
                    <div class="huiyuan">会员中心</div>
                </li>
                <li class="right-icon"><img class="hui" src="../../assets/images/icon/huiyuan.png" alt="">
                    <div class="huiyuan">会员中心</div>
                </li>
                <li><img class="hui" src="../../assets/images/icon/huiyuan.png" alt="">
                    <div class="huiyuan">会员中心</div>
                </li>

            </ul>
        </div>
        <div class="home-panel" >
            <div class="header" >
                <h4 >我的收藏</h4><a href="/home" class="router-link-active xtx-more" 
                    ><span >查看全部</span><i class="el-icon-arrow-right"
                        ></i></a>
            </div>
            <div class="goods-list" ><a href="javascript:;" class="goods-item" 
                    ><img alt="" 
                        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_5.jpg">
                    <p class="name ellipsis" >京消先满起结战月家儿报育群世种</p>
                    <p class="desc ellipsis">间制话回内程</p>
                    <p class="price" >¥102.91</p>
                </a><a href="javascript:;" class="goods-item" ><img alt=""
                        
                        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_6.jpg">
                    <p class="name ellipsis" >红都着时果见音规会样实四进对置报般万</p>
                    <p class="desc ellipsis" >资治她产属部议</p>
                    <p class="price" >¥187.31</p>
                </a><a href="javascript:;" class="goods-item" ><img alt=""
                        
                        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_6.jpg">
                    <p class="name ellipsis" >果日处难院酸油些装义历</p>
                    <p class="desc ellipsis" >照团别以治间最</p>
                    <p class="price" >¥100.67</p>
                </a><a href="javascript:;" class="goods-item" ><img alt=""
                        
                        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_5.jpg">
                    <p class="name ellipsis" >发存一准又处经族因信如运山政边百然片北者</p>
                    <p class="desc ellipsis">那研样即重</p>
                    <p class="price" >¥176.33</p>
                </a></div>
        </div>
        <div class="home-panel" >
            <div class="header" >
                <h4 >我的足迹</h4><a href="#/" class="router-link-active xtx-more" 
                    ><span >查看全部</span><i class="el-icon-arrow-right"
                        ></i></a>
            </div>
            <div class="goods-list" ><a href="javascript:;" class="goods-item" 
                    ><img alt="" 
                        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_5.jpg">
                    <p class="name ellipsis" >京消先满起结战月家儿报育群世种</p>
                    <p class="desc ellipsis">间制话回内程</p>
                    <p class="price" >¥102.91</p>
                </a><a href="javascript:;" class="goods-item" ><img alt=""
                        
                        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_6.jpg">
                    <p class="name ellipsis" >红都着时果见音规会样实四进对置报般万</p>
                    <p class="desc ellipsis" >资治她产属部议</p>
                    <p class="price" >¥187.31</p>
                </a><a href="javascript:;" class="goods-item" ><img alt=""
                        
                        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_6.jpg">
                    <p class="name ellipsis" >果日处难院酸油些装义历</p>
                    <p class="desc ellipsis" >照团别以治间最</p>
                    <p class="price" >¥100.67</p>
                </a><a href="javascript:;" class="goods-item" ><img alt=""
                        
                        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_5.jpg">
                    <p class="name ellipsis" >发存一准又处经族因信如运山政边百然片北者</p>
                    <p class="desc ellipsis">那研样即重</p>
                    <p class="price" >¥176.33</p>
                </a></div>
        </div>
        <div class="cai">
            <guessLike>
      <template v-slot:title>
        <p>猜你喜欢</p>
      </template>
    </guessLike>
        </div>
    </div>
      
      <!-- <dingdan></dingdan> -->
    </div>
    
 
  </div>
</template>
  

<script>
import cebianlan from './compontes/cebianlan.vue'
import guessLike from "../../components/guessLike.vue";
import {getGerenListAPI} from '../../apis/personal'

// import dingdan from './compontes/dingdan.vue'
// console.log("1"+JSON.parse(localStorage.getItem("token")),"本地存储token")
// console.log("Bearer "+JSON.parse(localStorage.getItem("token")),"本地存储token11")
export default {
    data() {
        return {
            personaldetails:[]
        }
    },
  components:{
    cebianlan,guessLike
    // dingdan
 
  },
  methods:{
    async getGerenListAPI(){
        const res = await getGerenListAPI({page:1,pageSize:10,orderState:1});
        console.log(res,'我的订单');
        // this.personaldetails = res.result;
    }
  },
  mounted() {
    this.getGerenListAPI()
    },
}

</script>

<style scoped>
.cai{
    width: 940px;
    margin-left: 10px;
    margin-bottom: 20px;
}
.goods-item {
    display: block;
    width: 220px;
    padding: 20px 30px;
    text-align: center;
    transition: all .5s;
}
.home-panel {
    background-color: #fff;
    padding: 0 20px;
    margin-top: 20px;
    height: 400px;
    margin-left: 10px;
}
.home-panel .goods-list {
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
}

* {
    box-sizing: border-box;
}
.home-panel .header {
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}


.right-icon {
    margin-right: 100px;
    margin-top: 10px;
    font-family: "iconfont" !important;
}

li {
    display: inline-block;
    margin-right: 50px;
}

.tou1 {
    background-image: url(../../assets/images/center-bg.png);
    height: 120px;
    margin-left: 10px;
}

.tou {
    margin-top: 10px;
    width: 80px;
    border-radius: 45px;
    margin-left: 50px;
    margin-right: 20px;
}

.right {
    float: right;
    margin-left: 200px;
    line-height: 50px;

}

.hui {
    width: 30px;

}

.huiyuan {
    margin-top: -10px;
    margin-left: -15px;
    margin-right: 0px;
}
.ss{
  display: flex;
  margin-top: 30px;

}
</style>
